<template>
    <div class="container">
        <div class="login_box">
            <Icon @click="closeWindow" type="md-close" size="24" class="icon_position" />
            <Input class="item-marginTop" size="large" v-model="telephone" placeholder="电话号码..." clearable />
            <Input class="item-marginTop" type="password" password size="large" v-model="password" placeholder="密码..." />
            <Button @click="getLogin" class="item-marginTop button-height"  type="success" long>登录</Button>
            <p class="bottom_info">
                <span>忘了密码</span>|
                <span>注册账号</span>
            </p>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import {login} from '../../ajax.js';
export default {
    data() {
        return {
            telephone: '',
            password: '',
        }
    },
    methods: {
        closeWindow() {
            this.$el.style.display = 'none'
        },
        getLogin() {
            axios.post('http://39.96.195.154:8080/user/login', {
                telephone: this.telephone,
                password: this.password
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
            // if (this.username === 'zhaosir' && this.password === '123') {
            //     this.$store.commit('setUsername',{
            //         username: this.username,
            //     });
            //     this.$Message.success('登录成功');
            //     this.$el.style.display = 'none'
            // }
        }
    },
}
</script>
<style lang="less">
    .container {
        width: 100vw;
        position: fixed;
        z-index: 999;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        .login_box {
            border-radius: 10px;
            box-shadow: 0 0 5px 5px #777;
            width: 300px;
            padding: 20px;
            height: 280px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            .icon_position {
                position: absolute;
                right: 5px;
                top: 5px;
            }
            .icon_position:hover {
                cursor: pointer;
            }
            .item-marginTop {
                margin-top: 30px;
            }
            .bottom_info {
                position: absolute;
                bottom: 5px;
                right: 20px;
                span {
                    display: inline-block;
                    margin: 0 5px;
                }
                span:hover {
                    text-decoration: underline;
                    cursor: pointer;
                    color: #666;
                }
            }
            .button-height {
                height: 40px;
                font-size: 17px;
                font-weight: 400;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>